<script lang="ts" setup>
import { defineProps, defineEmits, watch } from 'vue'
import { useRouter } from 'vue-router'
import { timeAbbreviation } from '@/utils/time'
import { useCounterStore } from '@/stores/counter'

import type {  ResultType , TypeChoice, TypeVideo} from '@/TypingMore/SearchTyping'

import NofindView from '@/components/NofindView.vue'

const props = defineProps<{
    searchResult: Array<ResultType>
    typeChoice: Array<TypeChoice>
        choice: string
}>()

const store = useCounterStore()

const { browseRecords } = store

const emits = defineEmits(['setTypeChoice'])

const router = useRouter()

const goToDetail = (bvid: string, t: TypeVideo) => {
    let obj = {
        bvid: t.bvid,
        aid: t.aid,
        length: t.duration,
        title: t.title,
        play: t.play,
        video_review: t.video_review,
        pic: t.pic
    }
    browseRecords(obj)
    router.push(`/video/${bvid}`)   
}

watch(() => props.searchResult, (newVal) => {
    console.log(newVal)
})

</script>

<template>
    <div class=" bg-white" v-if="(searchResult && searchResult.length > 0)">
       <div class=" flex justify-between px-5">
        <div v-for="t in typeChoice" :key="t.title" @click="emits('setTypeChoice', t.type)" :class="{'choice-active': choice === t.type}">{{ t.title }}</div>
       </div>
        <div v-for="s in searchResult" :key="s.result_type">
                <div v-for="r in s.data" :key="r.aid" class=" flex mt-3 mx-2 mb-2" v-show="(s.result_type === 'video')" @click="goToDetail(r.bvid, r)">
                    <div class=" w-36">
                        <img :src="r.pic + '@480w_270h_1c'" alt="" class=" w-full img-rounde" />
                    </div>
                    <div class=" flex-1 flex flex-col justify-between ml-3">
                        <p v-html="r.title" class=" text-sm line-two"></p>
                        <p class=" text-xs text-gray-400"><span class=" mr-1">up</span><span>{{ r.author }}</span>
                        </p>
                        <div class="flex text-xs text-gray-400">
                            <div class="mr-3 flex items-center"><span
                                    class="iconfont icon-bofangshu mr-1"></span><span>{{
                                            timeAbbreviation(r.play)
                                    }}</span></div>
                            <div class=" flex items-center"><span class="iconfont icon-danmushu mr-1"></span><span>{{
                                    timeAbbreviation(r.danmaku)
                            }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <NofindView v-else></NofindView>
</template>

<style>
.choice-active {
    color: #f69 ;
} 
</style>